<template>
  <div>
    <el-table :data="tableData" stripe style="width: 100%" >
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-date-picker
            v-model="scope.row.value1"
            type="daterange"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            @change="dataChange(scope.row)"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :disabled='scope.row.id < number'
          >
          </el-date-picker>
        </template>
      </el-table-column>
      <el-table-column label="日期"> 
        <template slot-scope="scope">
            <el-checkbox-group 
                v-model="scope.row.checkedItm"
                @change='weekChange(scope.row)'
                :disabled='!scope.row.value1 || scope.row.id < number'
                :max="scope.row.max"
                >
                <el-checkbox v-for="week in scope.row.date" :label="week" :key="week">{{week}}</el-checkbox>
            </el-checkbox-group>
        </template>
      </el-table-column>
      <el-table-column prop="single" label="单间" width="90"> 
         <div class="item" slot-scope="scope">
          <el-input class="item__input" v-model="scope.row.single" @input="changeData(scope.row)"  :disabled='scope.row.id < number' ></el-input>
         </div>
      </el-table-column>
      <el-table-column prop="Double" label="双人间" width="90"> 
         <div class="item" slot-scope="scope">
          <el-input class="item__input" v-model="scope.row.Double" @input="changeData(scope.row)"  :disabled='scope.row.id < number' ></el-input>
         </div>
      </el-table-column>
      <el-table-column prop="bigbed" label="大床" width="90"> 
         <div class="item" slot-scope="scope">
          <el-input class="item__input" v-model="scope.row.bigbed" @input="changeData(scope.row)"  :disabled='scope.row.id < number' ></el-input>
         </div>
      </el-table-column>
      <el-table-column prop="Triple" label="三人" width="90"> 
         <div class="item" slot-scope="scope">
          <el-input class="item__input" v-model="scope.row.Triple" @input="changeData(scope.row)"  :disabled='scope.row.id < number' ></el-input>
         </div>
      </el-table-column>
      <el-table-column prop="other" label="其他" width="90"> 
         <div class="item" slot-scope="scope">
          <el-input class="item__input" v-model="scope.row.other" @input="changeData(scope.row)"   :disabled='scope.row.id < number' ></el-input>
         </div>
      </el-table-column>
      <el-table-column :label="$t('message.operate')" align="center" prop="operate">
                    <template slot-scope="scope">
                        <el-button type="danger" icon="el-icon-delete-solid" size="mini" @click="delBtn(scope.row)">删除</el-button>
                    </template>
                    </el-table-column>
    </el-table>
    <el-button @click="add" :disabled='addFlag'>加</el-button>
    <el-button @click="aa">点</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // {
        //   value1: "",
        //   id: 1,
        //   date: ['周1-周4', '周5', '周6', '周日'],
        //   single: "",
        //   Double: "",
        //   bigbed:"",
        //   Triple:"",
        //   other:"",
        //   checkedItm:[],
        //   max:0,
        // },
        
      ],
      number:0,
      addFlag:false
    };
  },
  methods: {
    delBtn(row){
      this.tableData.forEach((element,index) => {
                    if(element.id === row.id){
                        this.tableData.splice(index,1)
                    }                    
                });
                
          if(this.tableData.length){
             this.tableData.forEach((ele,i)=>{
                    ele.id = i + 1
              })
              this.number--
          }else{
            this.number = 0
            this.addFlag = false
          }  
   
    },
    aa() {
      console.log(this.tableData);
    },
    add(){
      let id = this.tableData.length + 1
      this.tableData.push(
                    {
                        id:id,
                        value1: '',
                        date: ['周1-周4', '周5', '周6', '周日'],
                        single: '',
                        Double:'',
                        bigbed:'',
                        Triple:'',
                        other:'', 
                        checkedItm:[],
                        max:0,
                    }
                )
      this.number ++
      this.addFlag = true
    },
    changeData(row){
      // console.log(row);
       this.tableData.forEach((element) => {
          if(element.id === row.id){
            console.log(element.checkedItm,'element.checkedItm');
              if(element.checkedItm.length && element.single || element.Double || element.bigbed || element.Triple || element.other){
                this.addFlag = false
              }else{
                this.addFlag = true
              }            
          }
        })
        
    },
    dataChange(row) {
      if(!row.value1){
        this.tableData.forEach((element) => {
          if(element.id === row.id){
              element.checkedItm = [];             
          }
        })
        return
      }
      console.log(row);
      let date = new Date(row.value1[0]);
      let dateLast = new Date(row.value1[1]);
      let max = (dateLast - date) / 86400000 + 1
      console.log(max);
      let id = row.id;
      console.log(date, "date");
      this.tableData.forEach((element) => {
        if(element.id === id){
            element.checkedItm = [];
            element.max = max;
        }




        if (element.id !== id) {
          let date2 = new Date(element.value1[0]);
          let date3 = new Date(element.value1[1]);
          console.log(date2, date3, "date3");
          if (date >= date2 && date <= date3 || dateLast >= date2 && dateLast <= date3) {
            console.log(id, "id");
            this.tableData.forEach((ele) => {
              if (ele.id === id) {
                ele.value1 = "";
                ele.checkedItm = [];
                ele.max = 0;
              }
            });
          }
        }
      });
    },
    weekChange(row){
        // console.log(row,'133');
        this.tableData.forEach((element) => {
          if(element.id === row.id){
              if(element.checkedItm.length && element.single || element.Double || element.bigbed || element.Triple || element.other){
                this.addFlag = false
              }else{
                this.addFlag = true
              }            
          }
        })
    }
  },
};
</script>

<style scoped></style>
